<template>
  <div class="clock">
    <div class="title">
      <h1 class="head_text">Your Mission</h1>
    </div>
    <div class="subtitle">
      <h1 class="subtitle_text">Time Remaining</h1>
    </div>
    <div id="clock" style="display: flex;">
      <div class="time-section">
        <span id="hours">{{ formattedHours }}</span>

      </div>
      <div class="time-section">
        <span id="minutes">{{ formattedMinutes }}</span>
      </div>
      <div class="time-section">
        <span id="seconds">{{ formattedSeconds }}</span>
      </div>
      <div class="label">
        <h1>Hour</h1>
        <h2>Min</h2>
        <h3>Sec</h3>
      </div>
    </div>
    <div class="button_1">
      <button @click="stopTimer" class="button1">&#10074;&#10074;</button>
      <button @click="continueTimer" class="button2">&#9724;</button>
      <audio ref="alarmSound" src="clock-alarm.mp3"></audio>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      countdownTimer: null,
      timeRemaining: 0,
      hours: '00',
      minutes: '00',
      seconds: '00',
    };
  },
  computed: {
    formattedHours() {
      return this.padZero(Math.floor(this.timeRemaining / 3600));
    },
    formattedMinutes() {
      return this.padZero(Math.floor((this.timeRemaining % 3600) / 60));
    },
    formattedSeconds() {
      return this.padZero(this.timeRemaining % 60);
    },
  },
  methods: {
    setTime() {
      if (this.timeInput && this.timeInput.match(/\d{2}:\d{2}:\d{2}/)) {
        var times = this.timeInput.split(':');
        console.log(times)
        this.timeRemaining = parseInt(times[0], 10) * 3600 + parseInt(times[1], 10) * 60 + parseInt(times[2], 10);
        this.startCountdown();
      } else {
        alert('Invalid time format. Please enter time as HH:MM:SS');
      }
    },
    stopTimer() {
      if (this.countdownTimer) {
        clearInterval(this.countdownTimer);
        this.countdownTimer = null;
      }
    },
    continueTimer() {
      if (!this.countdownTimer && this.timeRemaining > 0) {
        this.startCountdown();
      }
    },
    startCountdown(){
      this.countdownTimer = setInterval(() => {
        this.timeRemaining--;
        if (this.timeRemaining <= 0) {
          clearInterval(this.countdownTimer);
          this.countdownTimer = null;
          this.$refs.alarmSound.play();
          alert("Time is up!");
          this.$router.push({path:'/task'});
        }
      }, 1000);
    },
    inputdata()
    {
      this.timeInput=prompt('Enter the countdown time as HH:MM:SS');
    },
    padZero(value) {
      return value < 10 ? '0' + value : value;
    },
    convertToHHMMSS(minutesString) {
      // 将字符串转换为整数
      const minutes = parseInt(minutesString, 10);
      // 计算小时、分钟和秒
      const hours = Math.floor(minutes / 60);
      const remainingMinutes = minutes % 60;
      // 将小时、分钟和秒格式化为字符串，并保证每个部分至少有两位
      const formattedHours = String(hours).padStart(2, '0');
      const formattedMinutes = String(remainingMinutes).padStart(2, '0');
      const formattedSeconds = '00';
      // 返回格式化后的时间字符串
      return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
  }
  },
  
  mounted() {
    var data=this.$route.query.data;
    if(data){
      this.timeInput = JSON.parse(data).during;
      this.timeInput=this.convertToHHMMSS(this.timeInput);
    }else{
      this.inputdata(); 
    }
    this.setTime();
  }
};
</script>

<style scoped>
.clock{
  width: 960px;
}
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:lightgray;
  border-radius: 10px;
  position: relative;
  top: 10px;
  left:230px;
  width: 500px;
  height: 50px;
  padding: 2px;
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.5);
}

.head_text {
  margin: 0;
  font-weight: bold; 
  font-family: Arial;
  font-size: 50px; 
  top: 2px;
  position: relative;
}
.subtitle {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  position: relative;
  top: -30px;
  left:320px;
  width: 300px;
}
.subtitle_text {
  color:steelblue;
  font-size: 30px;
  position:relative;
  top: 60px;
  font-weight:bolder;
}
.time-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  bottom: 50px;
  left: -150px;
  font-family: American Typewriter, serif;
}

.label {
  display: flex;
  justify-content: space-around; 
  align-items: center;
  position:relative;
  top:140px;
  left:-930px;
}

.label h1,
.label h2,
.label h3 {
  margin: 110px; 
  font-size: 50px;
  color:whitesmoke; 
  font-family: Arial, Helvetica, sans-serif;
}

#clock span {
  display: flex;
  justify-content: center; 
  align-items: center; 
  background-color: lightgray;
  padding: 20px; 
  margin: 30px;
  border-radius: 30px;
  height: 280px; 
  width: 250px; 
  font-size: 170px; 
  font-weight: bolder;
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.5);
  top:80px;
  left:155px;
  position:relative;
}


.button_1 {
  display: flex; 
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 50px;
  left: 630px;
  padding: 40px;
}

.button2 {
  margin: 0;
  background-color: white;
  padding: 12px;
  font-size: 0;
  border-radius: 50%;
  border: 2px solid gray;
  width: 50px;
  height: 50px;
  /* top: 20px;  */
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.button2::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid blue;
  margin-left: 2.5px; 
}

.button2:hover {
  background-color: lightgray;
}
.button1 {
  margin: 0 10px;
  background-color: white;
  padding: 12px 15px;
  font-size: 18px;
  border-radius: 50%;
  border: 2px solid gray;
  top: 600px;
  left: 655px;
  cursor:pointer;
}
.button1:hover {
  background-color:(rgb(211, 134, 90)211, 211); /* 鼠标悬停时更改背景颜色 */
}
</style>